<template>
    <div style="height: 95%;width: 100%;display:flex;justify-content:center;padding-top: 20px">
        <!--弹框DIV 设置弹框的大小的地方-->
        <div style="background: #fff;width: 700px;height: 600px;box-shadow: #D3DCE6 0px 0px 20px;">
            <div style="height:520px;border: #1C84C6;margin-top: 25px" class="scrollbar">
                <div style="height: 30px;">
                    <!--标题-->
                    <span style="font-size: 18px;margin-left: 25px;">
                        客户信息
                    </span>
                    <span style="margin-left: 530px">
                        <i slot="suffix" style="font-size: 30px;color: #D3DCE6" class="el-icon-close" @click="gotoQx"></i>
                    </span>
                </div>
                <!--height:91%;表单在弹框显示多长-->
                <el-scrollbar style="height:91%;padding-top: 20px;">
                    <div class="shugan"></div>
                    <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                    <!--表单-->
                    <el-form :rules="rules" :model="clients" ref="clients" style="margin-top:30px;margin-left: 30px;" size="mini">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clientName">
                                    <label slot="label" style="font-size: 13px">公司名称：</label>
                                    <el-input v-model="clients.clientName"></el-input>
                                    <el-input v-model="clients.clientSz" style="display: none;"></el-input>
                                    <el-input v-model="clients.clientId" style="display: none;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clientIndustry">
                                    <label slot="label" style="font-size: 13px">客户行业：</label>
                                    <el-select v-model="clients.clientIndustry" placeholder="请选择" style="width:250px;">
                                        <el-option v-for="item in khhy" :key="item.valuehy"
                                                   :label="item.labelhy" :value="item.valuehy">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px" prop="clientSource">
                                    <label slot="label" style="font-size: 13px">客户来源：</label>
                                    <el-select v-model="clients.clientSource" placeholder="请选择" style="width:250px;">
                                        <el-option v-for="item in khly" :key="item.value"
                                                   :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="empId">
                                    <label style="font-size: 13px">负责人：</label>
                                    <el-popover style="width: 700px; height: 450px;" placement="right"
                                                trigger="click" v-model="kehu">
                                        <span style="font-size:20px;">关联员工模块</span>
                                        <el-input @keyup.enter.native="initData" v-model="empinput"
                                                  style="width: 210px; margin-left: 200px; margin-bottom: 10px;">
                                            <i slot="suffix" class="el-input__icon el-icon-search" @click="initData"></i>
                                        </el-input>
                                        <el-table highlight-current-row border ref="emplist" :data="emplist">
                                            <el-table-column type="selection" width="50" align="center" property="empId"></el-table-column>
                                            <el-table-column width="150" property="empId" label="ID"></el-table-column>
                                            <el-table-column width="150" property="empName" label="姓名"></el-table-column>
                                            <el-table-column width="200" property="depId.depName" label="部门"></el-table-column>
                                        </el-table>
                                        <el-pagination @size-change="handleSizeChange" @current-change="changePage" :current-page.sync="currPage"
                                                       :page-size="pageSize" layout="total, prev, pager, next" :total="totalSize" >
                                        </el-pagination>
                                        <div style="text-align: center;width: 100%" class="dialog-footer">
                                            <el-button type="primary" @click="xzemp">保 存</el-button>
                                            <el-button type="primary" @click="kehu = false">取 消</el-button>
                                        </div>
                                        <el-input v-if="this.xg==0" v-model="clients.empId.empName" placeholder="+添加" slot="reference" :readonly='true' style="width: 250px;"></el-input>
                                    </el-popover>
                                    <el-input v-if="this.xg==1" :disabled="true" v-model="clients.empId.empName" placeholder="+添加" :readonly='true' style="width: 250px;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clientPhone">
                                    <label style="font-size: 13px">电话：</label>
                                    <el-input v-model="clients.clientPhone"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clientMobile">
                                    <label style="font-size: 13px">手机：</label>
                                    <el-input v-model="clients.clientMobile"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clientUrl">
                                    <label style="font-size: 13px">网址：</label>
                                    <el-input v-model="clients.clientUrl"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clientRank">
                                    <label style="font-size: 13px">客户级别：</label>
                                    <el-select v-model="clients.clientRank" placeholder="请选择" style="width:250px;">
                                        <el-option v-for="item in khjb" :key="item.valuejb" :label="item.labeljb"
                                                   :value="item.valuejb">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clientSite">
                                    <label style="font-size: 13px">地址：</label>
                                    <!--el-cascader级联（城市选择器）-->
                                    <el-cascader v-model="address" :options="options" ref="cascaderAddr" clearable
                                                 style="width: 250px;" filterable @change="handleChange" placeholder="选择地址">
                                    </el-cascader>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="establishPerson">
                                    <label style="font-size: 13px">下次联系时间：</label>
                                    <el-date-picker v-model="clients.establishPerson" align="right" type="datetime"
                                                    style="width: 250px;" placeholder="选择日期" :picker-options="pickerOptions">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clientSitexq">
                                    <label style="font-size: 13px">详情地址：</label>
                                    <el-input v-model="clients.clientSitexq"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item style="width:250px;" prop="clientRemark">
                                    <label style="font-size: 13px">备注：</label>
                                    <textarea style="width: 580px;" v-model="clients.clientRemark"></textarea>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-scrollbar>
                <!--确定按钮 设置了固定定位-->
                <div style="text-align: center;width: 80%;position: absolute;top:635px;left:230px;" class="dialog-footer">
                    <el-button @click="gotoQx">取 消</el-button>
                    <el-button type="primary" @click="yesok('clients')" >确 定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Crypto from "../router/secret";
    import cities from '../router/cities.js'
    export default {
        name: "TfyNewClient",
        data(){
            var shouji = (rule, value, callback) => {
                if(!value){
                    callback(new Error('请输入手机号码'));
                }else {
                    if(!(/^1[3456789]\d{9}$/.test(value))){
                        callback(new Error('请输入正确的手机号码'));
                    }else {
                        callback()
                    }
                }
            };
            var dianhua = (rule, value, callback) => {
                if(!value){
                    callback(new Error('请输入电话号码'));
                }else {
                    if(!/^((0\d{2,3}-\d{7,8})|(1[3584]\d{8}))$/.test(value)){
                        callback(new Error('请输入正确的电话号码'));
                    }else {
                        callback()
                    }
                }
            };
            var emp = (rule, value, callback) => {
                if (value.empName === null || value.empName === '') {
                    callback(new Error('请选择负责人'));
                }else {
                    callback()
                }
            };
            var wangzhi = (rule, value, callback) => {
                if(!value){
                    callback();
                }else {
                    if (!/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/.test(value)) {
                        callback(new Error('请输入正确的网址'));
                    } else {
                        callback()
                    }
                }
            };
            return{
                rules: {
                    clientName:[{ required: true, message: '请输入公司名称' , trigger: 'change'},],
                    clientIndustry:[{ required: true, message: '请选择客户行业' , trigger: 'change'},],
                    clientSource:[{ required: true, message: '请选择客户来源' , trigger: 'change'},],
                    empId:[{ validator: emp, required: true, trigger: ['blur','change']},],
                    clientPhone:[{ validator: dianhua, required: true, trigger: ['blur','change']},],
                    clientMobile:[{ validator: shouji, required: true, trigger: ['blur','change']},],
                    clientRank:[{ required: true, message: '请选择客户级别' , trigger: 'change'},],
                    clientSite:[{ required: true, message: '请选择地址' , trigger: 'change'},],
                    establishPerson:[{ required: true, message: '请选择下次联系时间' , trigger: 'change'},],
                    clientUrl:[{ validator: wangzhi, trigger: ['blur','change']},],
                },
                options: cities,
                address:[],
                //快捷日期选择器
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    },]
                },
                //客户来源
                khly: [{
                    value: '广告',
                    label: '广告'
                }, {
                    value: '转介绍',
                    label: '转介绍'
                }, {
                    value: '预约上门',
                    label: '预约上门'
                }, {
                    value: '线上注册',
                    label: '线上注册'
                }, {
                    value: '线上询价',
                    label: '线上询价'
                }, {
                    value: '公司资源',
                    label: '公司资源'
                }, {
                    value: '电话咨询',
                    label: '电话咨询'
                }, {
                    value: '邮件咨询',
                    label: '邮件咨询'
                }],
                value: '',
                //客户行业
                khhy: [{
                    valuehy: 'IT/通信/电子/互联网',
                    labelhy: 'IT/通信/电子/互联网'
                },{
                    valuehy: '金融业',
                    labelhy: '金融业'
                },{
                    valuehy: '房地产',
                    labelhy: '房地产'
                },{
                    valuehy: '商业服务',
                    labelhy: '商业服务'
                },{
                    valuehy: '贸易',
                    labelhy: '贸易'
                },{
                    valuehy: '生产',
                    labelhy: '生产'
                },{
                    valuehy: '运输/物流',
                    labelhy: '运输/物流'
                },{
                    valuehy: '服务业',
                    labelhy: '服务业'
                },{
                    valuehy: '文化传媒',
                    labelhy: '文化传媒'
                },{
                    valuehy: '政府',
                    labelhy: '政府'
                },{
                    valuehy: '其他',
                    labelhy: '其他'
                }],
                valuehy:'',

                //客户级别
                khjb:[{
                    valuejb: 'A(重点客户)',
                    labeljb: 'A(重点客户)'
                },{
                    valuejb: 'B(普通客户)',
                    labeljb: 'B(普通客户)'
                },{
                    valuejb: 'C(非优先客户)',
                    labeljb: 'C(非优先客户)'
                }],
                valuejb:'',

                options2: [{
                    value2: '选项1',
                    label: '导入'
                }, {
                    value2: '选项2',
                    label: '导出'
                }],
                value2:'',//下次联系时间
                //新增客户数据
                clients:{//客户
                    clientId:0,
                    empId:{//员工表
                        empId:0,
                        empName:'',
                        depId:{//部门
                            depId:0,
                            depName:'',
                        },
                    },
                    clientName:'',//公司名称
                    clientIndustry:'',//公司行业
                    clientSource:'',//客户来源
                    clientPhone:'',//客户电话
                    clientMobile:'',//客户手机
                    clientUrl:'',//客户网址
                    clientRank:'',//客户级别
                    clientSite:'',//客户地址
                    clientSitexq:'',//客户地址详情
                    establishPerson:'',//下次联系时间
                    clientRemark:'',//客户备注
                    clientSheng:'',
                    clientSz:''
                },
                kehu:false,//员工弹出框
                empinput:'',//员工弹框搜索框
                emplist:[],//员工表格信息
                pageSize:5,//员工分页页大小
                currPage:1,//员工当前页码，默认为1
                totalSize:0,//员工总记录数
                xg:'',
                khid:0,
                wtgzssb:''
            }
        },
        methods:{
            yesok(formName) {
                if(this.xg != 0){
                    this.addClient();
                }else{
                    this.$refs[formName].validate(valid => {
                        this.print(valid);
                        window.console.log(valid)
                        if (valid) {
                            this.addClient();
                        }else{
                            this.$message({
                                message: '验证不通过！',
                                type: 'warning'
                            });
                            return false;
                        }
                    });
                }
            },
            //新增客户
            addClient(){
                if (this.xg == 0) {
                    this.$axios.post("http://localhost:8088/addclienter-list",this.clients)
                        .then(v=> {
                            if(v.data != 0){
                                this.khid = v.data;
                                this.$alert('是否立即添加客户联系人？', '新增成功', {
                                    confirmButtonText: '确定',
                                }).then(() => {
                                    this.$router.push({//跳联系人页面
                                        path:'/xjlxr',
                                        query: {
                                            row:v.data,
                                        }
                                    });
                                }).catch(() => {
                                    this.$message({
                                        type: 'info',
                                        message: '已取消立即添加联系人'
                                    });
                                    //新增默认客户联系人
                                    this.$axios.post("http://localhost:8088/addkhlxr-list",this.qs.stringify({khid:this.khid}))
                                        .then(()=> {
                                            this.$message({
                                                showClose: true,
                                                type: 'success',
                                                message: '客户联系人已新增!',
                                            });
                                        }).catch(v=> {
                                        alert("加载失败客户联系人："+v.data);
                                    });
                                    this.$router.replace('/tfykh');//跳转客户页面
                                });
                            }else{
                                this.$message({
                                    message: '客户名称已存在，验证不通过！',
                                    type: 'warning'
                                });
                            }
                        }).catch(() => {
                        this.$message({
                            showClose: true,
                            message: '新增失败',
                            type: 'error'
                        });
                    })
                }else{
                    var busform=JSON.stringify({jh:this.clients,mc:this.wtgzssb})
                    this.$axios.post("http://localhost:8088/addclient-list",this.qs.stringify({busfrom:busform}))
                    .then(v => {
                            if(v.data != 0) {
                                this.$message({
                                    showClose: true,
                                    type: 'success',
                                    message: '修改成功!',
                                });
                                this.$router.push({
                                    path: '/tfykh'
                                });
                            }else{
                                this.$message({
                                    message: '客户名称已存在，验证不通过！',
                                    type: 'warning'
                                });
                            }
                        }).catch(() => {
                        this.$message({
                            showClose: true,
                            message: '修改失败',
                            type: 'error'
                        });
                    })
                }
            },
            //选择员工确定按钮
            xzemp() {
                this.$refs.emplist.selection.forEach((pro)=>{
                    this.clients.empId=pro;
                    window.console.log("id"+this.clients.empId)
                });
                this.kehu=false;
                this.empinput='';
            },
            //员工查询方法
            initData(){
                this.$axios.post("http://localhost:8088/findemp-list",this.qs.stringify(
                    {search:this.empinput, page:this.currPage, size:this.pageSize,}))
                    .then(v=>{
                        this.emplist = v.data.rows;
                        window.console.log("yg:"+this.emplist)
                        this.totalSize = v.data.total;
                    })
                    .catch()
            },
            changePage(v){
                this.currPage = v;
                this.initData();
            },
            xgclientxq(){//详情客户修改查询
                this.xg = 1;
                var clientId = Crypto.get(unescape(this.$route.query.clientId));
                this.$axios.post("http://localhost:8088/clientid-list",this.qs.stringify({clientId:clientId}))
                    .then(v=>{
                        this.clients = v.data;
                    }).catch(()=>{

                });
            },
            handleSizeChange(val){
                window.console.log('每页${val}条')
                this.initData(1,this.pageSize=val,this.emplist)
            },
            gotoQx(){//取消按钮
                this.$router.replace('/tfykh')
            },
            // 获取省市区地址级联
            handleChange(e, form, thsAreaCode) {
                thsAreaCode = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
                window.console.log(thsAreaCode);// 注意3： 最终结果是个一维数组对象
                window.console.log(thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2]);
                const checkedNodes = this.$refs['cascaderAddr'].getCheckedNodes();
                window.console.log(checkedNodes[0].pathLabels); // 获取由 label 组成的数组
                //省市区赋值
                this.clients.clientSite = thsAreaCode[0] +'/'+ thsAreaCode[1] +'/'+ thsAreaCode[2];
                this.clients.clientSz = e[0] +'/'+ e[1] +'/'+ e[2];
                //省赋值
                if(checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("省"))){
                    this.clients.clientSheng = checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("省"))
                }else if(checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("市"))){
                    this.clients.clientSheng = checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("市"))
                }else if(checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("特别行政区"))){
                    this.clients.clientSheng = checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("特别行政区"))
                }else if(checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("壮族自治区"))){
                    this.clients.clientSheng = checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("壮族自治区"))
                }else if(checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("回族自治区"))){
                    this.clients.clientSheng = checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("回族自治区"))
                }else if(checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("维吾尔自治区"))){
                    this.clients.clientSheng = checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("维吾尔自治区"))
                }else if(checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("自治区"))){
                    this.clients.clientSheng = checkedNodes[0].pathLabels[0].substring(0,checkedNodes[0].pathLabels[0].lastIndexOf("自治区"))
                }
                this.address=e;
                window.console.log(typeof e);
                window.console.log(e);
                window.console.log("结果1"+e);
                window.console.log("结果2"+form);
                window.console.log("结果3"+thsAreaCode);
            }
        },
        created:function() {
            if(this.$route.query.key!=null){//修改传id，显示数据
                this.clients=this.$route.query.key;
                this.wtgzssb=this.clients.clientName;
                this.xg = 1;
                this.address = this.clients.clientSz.split('/');//
                window.console.log(this.$route.query.key)
            }
            this.initData();
            this.print("客户ID："+this.$route.query.clientId);
            if(this.$route.query.clientId){
                this.xgclientxq();
            }
        }
    }
</script>

<style scoped>
    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 25px;
    }

    .el-scrollbar__wrap {
        overflow: scroll;
        width: 120%;
        height: 100%;
    }
</style>